<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
// import Gselect from '@/compnents/Gselect';
import articleEdit from './compnents/articleEdit.vue';
import channelEdit from './compnents/ChannelEdit.vue';
import { format } from '@/utils/format';
import { getManageList } from '@/api/article';
const tableData = ref([
  {
    Id: 5961,
    title: '新的文章啊',
    pub_date: '2022-07-10 14:53:52.604',
    state: '已发布',
    cate_name: '体育'
  },
  {
    Id: 5962,
    title: '新的文章啊',
    pub_date: '2022-07-10 14:54:30.904',
    state: null,
    cate_name: '体育'
  }
]);
const form = ref({
  pagenum: 1,
  pagesize: 20,
  cate_id: '',
  state: ''
});
const list = ref([
  { id: 1, value: 1, label: '科技' },
  { id: 2, value: 2, label: '宗教' },
  { id: 3, value: 3, label: '历史' }
]);
const getList = async () => {
  const res = getManageList(form.value);
  console.log(res, '123');
};
getList();
const selectValue = ref();
const handleSizeChange = (size) => {
  console.log(size, 'size');
};
const handleCurrentChange = (current) => {
  console.log(current, 'current');
};
const drawer = ref(null);
const title = ref('');
const addArticle = () => {
  title.value = '文章发布';
  drawer.value.open(title);
};
const onEdit = () => {
  title.value = '编辑';
  drawer.value.open(title);
};
</script>

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button @click="addArticle">文章发布</el-button>
    </template>
    <!-- 表单 -->
    <el-form inline>
      <el-form-item label="文章分类：">
        <Gselect :list="list" v-model="form.cate_id"></Gselect>
      </el-form-item>
      <el-form-item label="发布状态：">
        <Gselect
          :list="[
            { value: '发布成功', label: '发布成功' },
            {
              value: '未发布',
              label: '未发布'
            }
          ]"
          v-model="form.state"
        ></Gselect>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button type="">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="文章标题" width="180">
        <template #default="{ row }">
          <el-link :underline="false" type="primary">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类" width="180" />
      <el-table-column prop="pub_date" label="发布时间">
        <template #default="{ row }">
          {{ format(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="success"
            plain
            circle
            :icon="Edit"
            @click="onEdit(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <!-- 分页器 -->
    <div class="pagnation">
      <el-pagination
        v-model:current-page="form.pagenum"
        v-model:page-size="form.pagesize"
        :page-sizes="[100, 200, 300, 400]"
        :background="true"
        layout="jumper,total, sizes, prev, pager, next, "
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 抽屉弹窗 -->
    <articleEdit ref="drawer" :title="title"></articleEdit>
  </page-container>
</template>

<style lang="scss" scoped>
.pagnation {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
